<template>
	<scroll-view :scroll-x="true" class="tabsbg">
		<view  @click="settitindex(0)" :class="titindex==0?'tabsitem active':'tabsitem'">科名榜</view>
		<view  @click="settitindex(1)" :class="titindex==1?'tabsitem active':'tabsitem'">精英榜</view>
		<view  @click="settitindex(2)" :class="titindex==2?'tabsitem active':'tabsitem'">功名榜</view>
	</scroll-view>
	<view class="listbg">
		<view class="listitem" v-for="(item,index) in list" :key="index">
			<image :src="item.img" mode="aspectFill"></image>
			<view>{{item.firstName}}{{item.lastName}}</view>
			<text>{{item.education}}</text>
		</view>
	</view>
	<up-loadmore  lineColor="#ccc" line	 :status="status" />
</template>



<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		celebrityPageList
	} from "@/api/index.js"
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app';

	
	onReachBottom(() => {
		page.value++
		getList()
	})


	onLoad((e) => {	
	
		getList()	
	})
	let titindex=ref(0)
	function settitindex(e){
		titindex.value=e
		page.value=1
		list.value=[]
		getList()
	}
	
	
	let status=ref('loadmore')
	
	let list = ref([])
	
	let page=ref(1)
	
	
	
	function getList() {
		
		let data = {
			pageSize: 10,
			pageNum: page.value,
			type:titindex.value
		}
		status.value='loading'
		
		celebrityPageList(data).then(res => {
			if (page.value == 1) {
				list.value = res.rows
				status.value='nomore'
			} else {
				
				if (res.rows.length == 0) {
					uni.showToast({
						title: "暂无更多数据~",
						icon: "none"
					})
					page.value--
					status.value='nomore'
					return
				} else {
					list.value = [...list.value, ...res.rows]
                    status.value='nomore'
				}


			}
		})

	}

</script>



<style lang="scss" scoped>


	.listbg {
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;
		padding: 0 30rpx;
		margin-top: 40rpx;

		.listitem {
           margin-bottom: 24rpx;
			width: 334rpx;
			height: 400rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			border: 1rpx solid #C7A46F;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			padding: 22rpx 32rpx;
			&>image{
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				width: 266rpx;
				height: 266rpx;
			}
			view{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #111111;
				margin: 8rpx 0;
			}
			text{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #C7A46F;
			}
		}

		.listitem:nth-child(even) {
			margin-left: 22rpx;
		}
	}

	.tabsbg {
		width: 750rpx;
		white-space: nowrap;

		.tabsitem {
			margin-left: 30rpx;
			width: 166rpx;
			height: 80rpx;
			display: inline-flex;
			background: #FFFFFF;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			align-items: center;
			justify-content: center;
			margin-top: 30rpx;
			color: #C0C0C0;
			border: 1rpx solid #FFFFFF;
		}

		.active {
			border: 1rpx solid #111111;
			color: #111111;
		}
	}
</style>